<template>
	<view class="material-files">
		<view class="-images clearfix">
			<material-previewer class="-image" :index="index" :material="material" :width="width" :height="height"
				:key="index" v-for="(material,index) in materials" @material:preview="onPreview"
				@material:load="onMaterialLoad" />
			<view class="add -image flex-middle-center" :style="'width:' + width + ';height:' + height + ';'"
				@click="materialSelect.show=true" v-if="canAdd">
				<u-icon name="plus" size="30"></u-icon>
			</view>
		</view>
		<view class="-actions" v-if="!disabled">
			<text class="-action" @click="materialSelect.show=true">{{canAdd?'添加':'更换'}}</text>
			<text class="-action" @click="onClear">清除</text>
		</view>
		<material-select title="选择图片" :scene="scene" :visible.sync="materialSelect.show" @selection="onSelection" />
	</view>
</template>

<script>
	import File from './file/file.js'
	import MaterialPreviewer from './previewer.vue'
	import MaterialSelect from './select.vue'
	import {
		isArray
	} from '@/utils/index.js';
	export default {
		name: "material-files",
		mixins: [File],
		components: {
			MaterialSelect,
			MaterialPreviewer
		},
		props: {
			value: {
				type: [Array, String],
			},
			disabled: {
				type: Boolean,
				default: false
			},
			width: { // 宽度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "70px"
			},
			height: { // 高度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "70px"
			},
			scene: {
				type: String,
				default: "Document"
			},
			count: {
				type: Number,
				default: 9
			}
		},
		data() {
			return {
				materials: [],
				materialLoads: [],
				materialSelect: {
					show: false
				}
			}
		},
		watch: {
			value: function(val) {
				if (this.isString) {
					if (this.value) {
						try {
							let material = JSON.parse(this.value);
							this.materials = [];
							this.materials.push(material)
						} catch (e) {}
					}
				} else {
					this.materials = val || [];
				}
			},
			materials(val) {
				if (this.isString) {
					let first = val && val.length ? val[0] : null;
					if (first) {
						this.$emit('input', JSON.stringify(first))
					} else {
						this.$emit('input', "")
					}
				} else {
					this.$emit('input', val)
				}
			},
		},
		mounted() {
			this.materials = this.value || [];
		},
		computed: {
			images: function() {
				let images = [];
				this.materialLoads.forEach(p => {
					if (p && p.url) {
						images.push(p.url)
					}
				})
				return images;
			},
			canAdd: function() {
				return this.materials.length < this.count;
			},
			isString: function() {
				return !isArray(this.value);
			}
		},
		methods: {
			onClear: function() {
				this.materials = [];
				this.materialLoads = [];
			},
			onSelection: function(selection) {
				let md = 0;
				for (let i = 0; i < selection.length; i++) {
					let image = selection[i];
					if (this.canAdd && this.isImage(image)) {
						this.materials.push({
							id: image.id,
							name: image.name
						});
					} else if (this.isImage(image)) {
						let index = md++ % this.count;
						this.materials.splice(index, 1, {
							id: image.id,
							name: image.name
						})
					}
				}
			},
			onMaterialLoad: function(file) {
				this.materialLoads.push(file)
			},
			onPreview: function(index) {
				uni.previewImage({
					current: index,
					urls: this.images
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.material-files {
		.add {
			padding: 20rpx;
			position: relative;
			overflow: hidden;
		}

		.-image {
			float: left;
			margin: 0 10rpx 10rpx 0;
			border: 1px dashed #d9d9d9;
		}

		.-action {
			margin: 10rpx 10rpx 0 0 !important;
		}
	}
</style>
